<template>
  <div class="bgf5f6">
    <div class="navgation bgblue h22"></div>
    <p class="bgblue h22 textc cfff">雷达</p>
    <FormId>
      <div class="disflex radar_menu jsbet bgfff pl36 pr37 fs16 c78 lh44">
        <span :class="type1_id == 0 ? 'active' : '' "
              @click="type1_tap(0)">AI追踪</span>
        <span :class="type1_id == 1 ? 'active' : '' "
              @click="type1_tap(1)">AI分析</span>
        <span :class="type1_id == 2 ? 'active' : '' "
              @click="type1_tap(2)">成交率</span>
      </div>
    </FormId>

    <FormId>
      <div class="disflex jscen pt8 pb10 radar_trace fs12 lh30 textc btf5f6 bgfff menus"
           v-if="menu[type1_id]">
        <span v-for="(v,k) in menu[type1_id]"
              :key="k"
              :class="type2_id == v.id ? 'active' : ''"
              @click="type2_tap(v.id)"
              class="time">{{v.title}}</span>
      </div>
    </FormId>
    <AddNoticeNum ref="noticeNum"></AddNoticeNum>

    <div class=" pl15 pr15 bgfff fs14 ca8 lh26 trans2 pb10"
         v-if="menu[type1_id] && menu[type1_id][type2_id] && menu[type1_id][type2_id].child">
      <div class="disflex jsbet">
        <span class="bfff pl10 pr11 cb8 bradius5 h26 borderbox"
              :class="type3_id == v.id?'bblue cblue' : ''"
              v-for="(v,k) in menu[type1_id][type2_id].child"
              :key="k"
              @click="type3_tap(v.id)">{{v.title}}</span>
      </div>
    </div>

    <template v-if="!lists.length">
      <NoData>暂无数据</NoData>
    </template>
    <template v-else>
      <!--今天-->
      <div v-if="type1_id == 0">
        <div class="pl15 pr15"
             v-for="(v,k) in ai_lists"
             :key="k">
          <p class="lh36 fs12 ca8">{{k}}</p>
          <div class="mb10"
               v-for="(v2,k2) in v"
               :key="k2">
            <MsgBox :msg="v2"
                    :type="type"
                    :istime="type1_id != 1"
                    :isrank="type1_id == 1"
                    :isaction="true"
                    :isusertag="true"
                    :bradius="'bradius5'"
                    @row_tap="row_tap">
            </MsgBox>
          </div>
        </div>
      </div>

      <div v-else
           class="pt15">
        <div class="pl15 pr15"
             v-for="(v,k) in lists"
             :key="k">
          <div class="mb10">
            <MsgBox :msg="v"
                    :type="type"
                    :istime="false"
                    :isrank="true"
                    :isaction="true"
                    :isusertag="true"
                    :bradius="'bradius5'"
                    :index="k"
                    @row_tap="row_tap">
            </MsgBox>
          </div>
        </div>

      </div>
    </template>

    <!--    <div v-else-if="type1_id == 2" class="pt15">
            <div class="pl15 pr15" v-for="(v,k) in lists" :key="k">
                <div class="mb10">
                    <MsgBox :msg="v"
                            :type="type"
                            :istime="true"
                            :isrank="false"
                            :isaction="true"
                            :isusertag="true"
                            :bradius="'bradius5'"
                            :actionType="'rate'"
                            @row_tap="row_tap">
                    </MsgBox>
                </div>
            </div>

        </div>-->

    <!--bottom-->
    <div class="textc lh42 fs12 ca8 bgf5f6"
         v-if="lists.length && nodata">- 到底了，看看其他的吧 -</div>

    <!--未创建名片提示-->
    <div v-show="nocard_show">
      <DialogBox :dialog_title="'提示'"
                 @btn_tap="nocard_btn_tap"
                 :dialog_ph="'您还没有名片哦，请先创建自己的名片再进入'"
                 :type="'hint2'"
                 :left="'取消'"
                 :right="'创建名片'"></DialogBox>
    </div>
    <!--之前-->
    <!--<div class="pl15 pr15">
        <p class="lh36 fs12 ca8">昨天</p>
        <div v-for="(msgitem,k) in before_today" :key="k" class="mb10">
            <MsgBox :msg="msgitem"
                    :type="type"
                    :istime="type1_id != 1"
                    :isrank="type1_id == 1"
                    :isaction="true"
                    :bradius="'bradius5'"
                    @row_tap="row_tap">
            </MsgBox>
        </div>
    </div>-->

  </div>
</template>

<script>
import MsgBox from '@/components/msgBox' // 订单项
import AddNoticeNum from '@/components/AddNoticeNum';
import WXAJAX from '../../utils/request'
import FormId from '@/components/formId'
import NoData from '@/components/noData'
import DialogBox from '@/components/dialogBox' // 对话框

export default {
  data () {
    return {
      notYetLogin: false, // 暂时不登录
      type1_id: '0',
      type2_id: '0',
      type3_id: '1',
      nocard_show: false,
      menu: [
        [
          { title: '时间追踪', id: 0, },
          {
            title: '行为追踪', id: 1,
            child: [
              { title: '看名片', id: 1, },
              { title: '看产品', id: 2, },
              { title: '看动态', id: 4, },
              { title: '看官网', id: 3, },
            ]
          }
        ],
        [
          { title: '查看名片', id: 1, },
          { title: '重视产品', id: 2, },
          { title: '关注动态', id: 4, },
          { title: '关注企业', id: 3, }
        ],
      ],
      lists: [],
      ai_lists: {}, //解决AI追踪时间排序
      type: 1,
      page: 1,
      isLoading: false,//是否在加载
      nodata: false,//是否已经没有数据
      seeType: {
        1: {
          title: '名片',
          1: '现在沟通，效率更高哦',
          4: '成交有望'
        },
        2: {
          title: '产品',
          1: '尽快把握商机',
          4: '可标注为重点客户',
        },
        3: {
          title: '官网',
          1: '有望合作',
          4: '可标注为重点客户',
        },
        4: {
          title: '动态',
          1: '合作意向很强烈',
          4: '成单在望',
        }
      },
      infoText: {}
    }
  },

  components: { MsgBox, FormId, NoData, DialogBox, AddNoticeNum },

  onLoad () {
    this.lists = [];
    this.ai_lists = {};
    this.page = 1;
    this.nocard_show = false;
    this.isLoading = false
    const query = this.$root.$mp.query;
    if (query && query.notYetLogin) {
      this.notYetLogin = query.notYetLogin;
    }
    this.getInits();
  },
  onShow () {
    try {
      wx.setNavigationBarTitle({
        title: "雷达"
      });
    } catch (e) {
      // this.$refs.noticeNum && this.$refs.noticeNum.getTotalNum();
    }
    this.$refs.noticeNum && this.$refs.noticeNum.getTotalNum();
  },
  onReachBottom () {
    let v = this;
    v.getInits();
  },
  async onPullDownRefresh () {
    // to doing..
    // 下拉刷新
    wx.showNavigationBarLoading();
    this.nodata = false;
    this.lists = [];
    this.ai_lists = {};
    this.page = 1;
    this.isLoading = false;
    this.getInits();
    wx.stopPullDownRefresh();
    setTimeout(function () {
      wx.hideNavigationBarLoading();
    }, 300)
  },
  methods: {
    nocard_btn_tap (str) {
      console.log(str);
      if (str == 'save') {
        this.toCreatePage();
      }
      this.nocard_show = false;
    },
    getInits () {
      if (this.notYetLogin) {
        this.notYetLogin = false;
        return;
      }

      let v = this,
        params = {};

      if (v.isLoading) {
        wx.hideLoading();
        return
      }
      v.isLoading = true;

      // entranceType : 入口类型（1:时间追踪，2：行为追踪，3：ai分析,4,成交率）
      // seeType :  查看类型 1:名片，2:产品，3：官网,4:查看动态
      if (this.type1_id == 0) { //智能追踪
        if (this.type2_id == 0) {
          params.entranceType = 1;
        } else if (this.type2_id == 1) {
          params.entranceType = 2;
          params.seeType = this.type3_id;
        }
      } else if (this.type1_id == 1) { //AI分析
        params.entranceType = 3;
        params.seeType = this.type2_id;
      } else if (this.type1_id == 2) {//成交率
        params.entranceType = 4;
        //params.seeType = 2;
      }
      params.pageNum = v.page;

      wx.showLoading();
      WXAJAX.POST(params, '', '/seeRecord/getSeeRecordList', null, '/pages/index/main').then((data, code) => {

        wx.hideLoading();
        if (data) {
          let today = new Date(),
            year = today.getFullYear(),
            month = today.getMonth() + 1,
            day = today.getDate(),
            item = {},
            _datas = {},
            _length = v.lists.length,
            _lastFullTime = 0;

          if (v.type1_id == 0) { // 智能追踪， 分时间显示
            _length != 0 && (_lastFullTime = v.lists[_length - 1][0].fullTime);
            let tmp = JSON.parse(JSON.stringify(v.ai_lists));
            data.forEach(function (i, k) {
              var time = new Date(i.createTime),
                fullTime = time.getFullYear() + '' + (time.getMonth() + 1) + '' + time.getDate(),
                showTime = '',
                info = '';
              if (time.getFullYear() < year) {//今年之前
                showTime = time.getFullYear() + '-' + (time.getMonth() + 1) + '-' + time.getDate();
              } else {//今年
                if ((time.getMonth() + 1) == month) {
                  if (time.getDate() == day) {//今天
                    showTime = '今天';
                  } else if (time.getDate() + 1 == day) {//昨天
                    showTime = '昨天';
                  } else {
                    showTime = (time.getMonth() + 1) + '-' + time.getDate();
                  }
                } else {
                  showTime = (time.getMonth() + 1) + '-' + time.getDate();
                }
              }

              if (i.ranking < 3) {
                info = v.seeType[i.seeType][1];
              } else {
                info = v.seeType[i.seeType][4];
              }


              item = Object.assign(i, {
                fullTime: fullTime,//年月日
                time: showTime,//页面显示时间
                logo: i.logo,
                see: v.seeType[i.seeType].title,
                action: '查看',
                num: i.num,
                hour: time.getHours().toString().padStart(2, '0') + ':' + time.getMinutes().toString().padStart(2, '0'),
                info: info,
              });

              if (tmp[showTime]) {
                tmp[showTime].push(item);
              } else {
                tmp[showTime] = [item];
              }
              //
              //   if(_lastFullTime == fullTime){
              //     v.lists[_length-1].push(item);
              //   }else{
              //     if (_datas[fullTime]) {
              //       _datas[fullTime].push(item);
              //     } else {
              //       _datas[fullTime] = [];
              //       _datas[fullTime].push(item);
              //     }
              //   }
            });
            v.ai_lists = tmp;

            v.lists = Object.keys(v.ai_lists);
            // console.log(_datas)

            // var newkey = Object.keys(_datas);
            // //先用Object内置类的keys方法获取要排序对象的属性名，再利用Array原型上的sort方法对获取的属性名进行排序，newkey是一个数组
            // var newObj = {};//创建一个新的对象，用于存放排好序的键值对
            // for (var i = 0; i < newkey.length; i++) {//遍历newkey数组
            //   newObj[newkey[i]] = _datas[newkey[i]];//向新创建的对象中按照排好的顺序依次增加键值对
            // }

            // _datas = [];
            // for (var i in newObj) {
            //   _datas.push(newObj[i]);
            // }
            // _datas = _datas.reverse();
            // v.lists = [...v.lists, ..._datas];
          } else {
            _datas = [];
            data.forEach(function (i, k) {
              var time = new Date(i.createTime),
                info = '';
              if (i.ranking < 3) {
                info = v.seeType[i.seeType][1];
              } else {
                info = v.seeType[i.seeType][4];
              }

              item = Object.assign(i, {
                logo: i.logo,
                see: v.seeType[i.seeType].title,
                action: '查看',
                num: i.num,
                hour: time.getHours() + ':' + time.getMinutes(),
                rate: i.rate ? (i.rate * 100).toFixed(2) + '%' : '',
                info: info,
                userId: i.userId,
                entranceType: params.entranceType,
              });
              // console.log(item)
              _datas.push(item);
            });
            v.lists = [...v.lists, ..._datas];
          }
          v.page++;
          setTimeout(function () {
            v.isLoading = false;
          }, 500);

        } else if (code == 209) {

        } else {
          v.nodata = true;
        }
        setTimeout(function () {
          v.isLoading = false;
        }, 500);
      }).catch((err) => {
        console.log(err);
        wx.hideLoading();
        if (err.code == 403) {
          this.nocard_show = true;
        }
        setTimeout(function () {
          v.isLoading = false;
        }, 500);
      });
    },
    type1_tap (id) {
      this.type1_id = id;
      if (this.menu[id]) {
        this.type2_id = this.menu[id][0].id;
      }
      if (id == 0) {
        this.type = 1;
      } else {
        this.type = 5;
      }
      this.nodata = false;
      this.lists = [];
      this.ai_lists = {};
      this.page = 1;
      this.isLoading = false;
      this.getInits();
    },
    type2_tap (id) {
      this.type2_id = id;
      this.nodata = false;
      this.lists = [];
      this.ai_lists = {};
      this.page = 1;
      this.isLoading = false;
      this.getInits();
    },
    type3_tap (id) {
      this.type3_id = id;
      this.nodata = false;
      this.lists = [];
      this.ai_lists = {};
      this.page = 1;
      this.isLoading = false;
      this.getInits();
    },
    row_tap (cardId, userId) {//选择AI客户

      wx.setStorageSync('AIUserId', userId);
      wx.navigateTo({ url: '../customerAnalysis/main?userId=' + userId });
    },

  },

}
</script>

<style>
.radar_menu .active {
  color: #51cdcb;
  border-bottom: 4upx solid #51cdcb;
}

.radar_trace .time {
  width: 160upx;
  box-sizing: border-box;
  border: 1upx solid #51cdcb;
  border-right: 0;
  color: #51cdcb;
  transition: 0.1s;
}

.radar_trace .time:last-child {
  border-right: 1upx solid #51cdcb;
  border-radius: 0 30upx 30upx 0;
}

.radar_trace .time:first-child {
  border-radius: 30upx 0 0 30upx;
}

.radar_trace .active {
  background: #51cdcb;
  color: #fff;
}
</style>








































